<template>
  <div class="test-equipment">
    <div class="test-equipment-top">
      <div class="top-title">
        <div class="title-item1">
          <span class="title-item1-font">Ku频段散射通信设备</span>
        </div>
        <div class="title-item2">
          <div
            v-if="KuRunStatusValue && KuRunStatusValue.onlineStatus == '在线'"
            class="test-equipment"
          >
            <img src="@/assets/images/statusMonitor/online-light.png" alt="" />
            <span class="title-item2-font-online">在线</span>
          </div>
          <div v-else class="test-equipment">
            <img src="@/assets/images/statusMonitor/offline-light.png" alt="" />
            <span class="title-item2-font-offline">离线</span>
          </div>
        </div>
        <div class="title-item3">
          <span class="text-title">经度：</span
          ><span class="text-content">{{
            kuScatteringCommData.longitude
          }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">纬度：</span
          ><span class="text-content">{{ kuScatteringCommData.latitude }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">高度：</span
          ><span class="text-content">{{ kuScatteringCommData.altitude }}</span>
        </div>
        <div class="title-item3">
          <span class="text-title">对端经度：</span
          ><span class="text-content">{{
            kuScatteringCommData.remoteLongitude
          }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">对端纬度：</span
          ><span class="text-content">{{
            kuScatteringCommData.remoteLatitude
          }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">对端高度：</span
          ><span class="text-content">{{
            kuScatteringCommData.remoteAltitude
          }}</span>
        </div>
        <div class="title-item5">
          <span class="text-title">时间：</span
          ><span class="text-content">{{
            kuScatteringCommData.recordTimestamp
          }}</span>
        </div>
      </div>
      <div class="top-content">
        <div class="top-content-item1">
          <div class="content-title">
            <span>通信测试设备运行状态</span>
          </div>
          <div class="status-container">
            <div v-for="(value, key) in CKURunStatusDict" class="status-item">
              <div class="status-title">{{ value }}：</div>
              <div class="status-value">
                <template
                  v-if="['正常', '自检完成'].includes(KuRunStatusValue[key])"
                >
                  <img src="@/assets/images/statusMonitor/normal.png" alt="" />
                </template>
                <template
                  v-else-if="
                    ['故障', '--', '自检中'].includes(KuRunStatusValue[key])
                  "
                >
                  <img src="@/assets/images/statusMonitor/danger.png" alt="" />
                </template>
                <template v-else-if="KuRunStatusValue[key]">
                  {{ KuRunStatusValue[key] }}
                </template>
                <template v-else> -- </template>
              </div>
            </div>
          </div>
        </div>
        <div class="top-content-item2">
          <div class="content-title">
            <span>通信参数监测</span>
          </div>
          <div class="status-container">
            <div
              v-for="(value, key) in CKUCommunicateParamsDict"
              class="status-item"
            >
              <div class="status-title">{{ value }}:</div>
              <div class="status-value">
                <template v-if="kuScatteringCommData[key] == '正常'">
                  <img src="@/assets/images/statusMonitor/normal.png" alt="" />
                </template>
                <template
                  v-else-if="
                    ['故障', '离线', '未安装', '告警'].includes(
                      kuScatteringCommData[key]
                    )
                  "
                >
                  <img src="@/assets/images/statusMonitor/danger.png" alt="" />
                </template>
                <template v-else-if="kuScatteringCommData[key]">
                  {{ kuScatteringCommData[key] }}
                </template>
                <template v-else> -- </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="test-equipment-middle">
      <div class="top-title">
        <div class="title-item1">
          <span class="title-item1-font">C频段散射通信设备</span>
        </div>
        <div class="title-item2">
          <div
            v-if="CRunStatusValue && CRunStatusValue.onlineStatus == '在线'"
            class="test-equipment"
          >
            <img src="@/assets/images/statusMonitor/online-light.png" alt="" />
            <span class="title-item2-font-online">在线</span>
          </div>
          <div v-else class="test-equipment">
            <img src="@/assets/images/statusMonitor/offline-light.png" alt="" />
            <span class="title-item2-font-offline">离线</span>
          </div>
        </div>
        <div class="title-item3">
          <span class="text-title">经度：</span
          ><span class="text-content">{{ cScatteringCommData.longitude }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">纬度：</span
          ><span class="text-content">{{ cScatteringCommData.latitude }}</span>
        </div>
        <div class="title-item6">
          <span class="text-title">高度：</span
          ><span class="text-content">{{ cScatteringCommData.altitude }}</span>
        </div>
        <div class="title-item3">
          <span class="text-title">对端经度：</span
          ><span class="text-content">{{
            cScatteringCommData.remoteLongitude
          }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">对端纬度：</span
          ><span class="text-content">{{
            cScatteringCommData.remoteLatitude
          }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">对端高度：</span
          ><span class="text-content">{{
            cScatteringCommData.remoteAltitude
          }}</span>
        </div>

        <div class="title-item5">
          <span class="text-title">时间：</span
          ><span class="text-content">{{
            cScatteringCommData.recordTimestamp
          }}</span>
        </div>
      </div>
      <div class="top-content">
        <div class="top-content-item1">
          <div class="content-title">
            <span>通信测试设备运行状态</span>
          </div>
          <div class="status-container">
            <div v-for="(value, key) in CKURunStatusDict" class="status-item">
              <div class="status-title">{{ value }}：</div>
              <div class="status-value">
                <template v-if="['正常', '自检完成'].includes(CRunStatusValue[key])">
                  <img src="@/assets/images/statusMonitor/normal.png" alt="" />
                </template>
                <template v-else-if="['故障', '--', '自检中'].includes(CRunStatusValue[key])">
                  <img src="@/assets/images/statusMonitor/danger.png" alt="" />
                </template>
                <template v-else-if="CRunStatusValue[key]">
                  {{ CRunStatusValue[key] }}
                </template>
                <template v-else> -- </template>
              </div>
            </div>
          </div>
        </div>
        <div class="top-content-item2">
          <div class="content-title">
            <span>通信参数监测</span>
          </div>
          <div class="status-container">
            <div
              v-for="(value, key) in CKUCommunicateParamsDict"
              class="status-item"
            >
              <div class="status-title">{{ value }}：</div>
              <div class="status-value">
                <template v-if="cScatteringCommData[key] == '正常'">
                  <img src="@/assets/images/statusMonitor/normal.png" alt="" />
                </template>
                <template
                  v-else-if="
                    ['故障', '离线', '未安装', '告警'].includes(
                      cScatteringCommData[key]
                    )
                  "
                >
                  <img src="@/assets/images/statusMonitor/danger.png" alt="" />
                </template>
                <template v-else-if="cScatteringCommData[key]">
                  {{ cScatteringCommData[key] }}
                </template>
                <template v-else> - </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="test-equipment-bottom">
      <div class="top-title">
        <div class="title-item1">
          <span class="title-item1-font">VHF/UHF电台</span>
        </div>
        <div class="title-item2">
          <div
            v-if="VuRunStatusValue && VuRunStatusValue.onlineStatus == '在线'"
            class="test-equipment"
          >
            <img src="@/assets/images/statusMonitor/online-light.png" alt="" />
            <span class="title-item2-font-online">在线</span>
          </div>
          <div v-else class="test-equipment">
            <img src="@/assets/images/statusMonitor/offline-light.png" alt="" />
            <span class="title-item2-font-offline">离线</span>
          </div>
        </div>
        <div class="title-item3">
          <span class="text-title">经度：</span
          ><span class="text-content">{{ uvCommData.longitude }}</span>
        </div>
        <div class="title-item4">
          <span class="text-title">纬度：</span
          ><span class="text-content">{{ uvCommData.latitude }}</span>
        </div>
        <div class="title-item5">
          <span class="text-title">时间：</span
          ><span class="text-content">{{ uvCommData.recordTimestamp }}</span>
        </div>
      </div>
      <div class="top-content">
        <div class="top-content-item1">
          <div class="content-title">
            <span>通信测试设备运行状态</span>
          </div>
          <div class="status-container">
            <div v-for="(value, key) in VURunStatusDict" class="status-item">
              <div class="status-title">{{ value }}：</div>
              <div class="status-value">
                <template v-if="VuRunStatusValue[key] == '正常'">
                  <img src="@/assets/images/statusMonitor/normal.png" alt="" />
                </template>
                <template
                  v-else-if="['故障', '--'].includes(VuRunStatusValue[key])"
                >
                  <img src="@/assets/images/statusMonitor/danger.png" alt="" />
                </template>
                <template v-else-if="VuRunStatusValue[key]">
                  {{ VuRunStatusValue[key] }}
                </template>
                <template v-else> -- </template>
              </div>
            </div>
          </div>
        </div>
        <div class="top-content-item2">
          <div class="content-title">
            <span>通信参数监测</span>
          </div>
          <div class="status-container">
            <div
              v-for="(value, key) in VUCommunicateParamsDict"
              class="status-item"
            >
              <div class="status-title">{{ value }}：</div>
              <div class="status-value">
                <template v-if="uvCommData[key] == '正常'">
                  <img src="@/assets/images/statusMonitor/normal.png" alt="" />
                </template>
                <template v-else-if="['故障'].includes(uvCommData[key])">
                  <img src="@/assets/images/statusMonitor/danger.png" alt="" />
                </template>
                <template v-else-if="uvCommData[key]">
                  {{ uvCommData[key] }}
                </template>
                <template v-else> -- </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StatusMonitor",
  components: {},
  props: {},
  data() {
    return {
      // C/KU运行状态中文项
      CKURunStatusDict: {
        selfCheckStatus: "自检状态",
        antStatus: "天线状态",
        paStatus: "功放状态",
        waveSwitchStatus: "波导开关状态",
        securityStatus: "保密机状态",
        fanStatus: "风扇状态",
        locationStatus: "定位状态",
        pointingStatus: "指向状态°",
        powerStatus: "供电状态",
        baseBandStatus: "基带状态",
      },
      // C/KU通信参数中文项
      CKUCommunicateParamsDict: {
        signalDistance: "信号传输距离",
        azimuth: "方位角",
        pitchAngle: "俯仰角",
        sendPower: "发射功率",
        receivePower: "接收功率",
        modulation: "调制方式",
        encode: "编码方式",
        localSnr: "本端接收信噪比",
        oppositeSnr: "对端接收信噪比",
        localSnrMargin: "本端信噪比余量",
        oppositeSnrMargin: "对端信噪比余量",
        ser: "误码率",
        fer: "误帧率",
        symbolRate: "当前符号率",
        sendRate: "发送速率",
        receiveRate: "接收速率",
      },
      // VHF/UHF运行状态中文项
      VURunStatusDict: {
        antStatus: "天线状态",
        paStatus: "功放状态",
        securityStatus: "保密机状态",
        locationStatus: "定位状态",
        powerStatus: "供电状态",
        baseBandStatus: "基带状态",
        flowCtrlStatus: "流控状态",
        netStatus: "网络状态",
        todStatus: "TOD状态",
      },
      // VHF/UHF通信参数中文项
      VUCommunicateParamsDict: {
        signalDistance: "信号传输距离",
        azimuth: "方位角",
        sendPower: "发射功率",
        receivePower: "接收功率",
        modulation: "调制方式",
        encode: "编码方式",
        snr: "信噪比",
        ser: "误码率",
        fer: "误帧率",
        sendRate: "信息速率",
        linkQuality: "链路质量",
        bandNo: "信道号",
        waveType: "波形类型",
        workMode: "工作模式",
        fixedFrequency: "定频频率",
        frequencyHoppingTableNo: "跳频表号",
        frequencyHoppingNetNo: "跳频网号",
        networkMode: "网络模式",
      },
    };
  },
  computed: {
    CRunStatusValue() {
      return this.$store.getters.cScatteringRunData;
    },
    KuRunStatusValue() {
      return this.$store.getters.kuScatteringRunData;
    },
    VuRunStatusValue() {
      return this.$store.getters.uvRunData;
    },
    cScatteringCommData() {
      return this.$store.getters.cScatteringCommData;
    },
    kuScatteringCommData() {
      return this.$store.getters.kuScatteringCommData;
    },
    uvCommData() {
      return this.$store.getters.uvCommData;
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.test-equipment {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  .test-equipment-top,
  .test-equipment-middle,
  .test-equipment-bottom {
    flex: 1;
    background: url("../../../assets/images/statusMonitor/border.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .test-equipment-middle {
    margin: 10px 0;
  }
  .test-equipment-top {
  }
  .top-title {
    display: flex;
    flex-direction: row;
    align-content: center;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    .title-item1 {
      flex: 5;
      background: url("../../../assets/images/statusMonitor/title.png")
        no-repeat center center;
      background-size: 100% 100%;
      padding-left: 3.4375rem;
      .title-item1-font {
        font-weight: bold;
        background: linear-gradient(to bottom, #f0f0f0, #00e4ff);
        -webkit-background-clip: text; /* 使用背景作为文字填充 */
        -webkit-text-fill-color: transparent; /* 隐藏文字的实际颜色 */ /* 渐变色从红色到蓝色 */
        letter-spacing: 0.1em; /* 设置字间距为0.2em，可以根据需要调整 */
      }
    }
    .title-item2 {
      flex: 3;
      margin-right: 8px;
      .test-equipment {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        img {
          width: 1.875rem;
          height: 1.875rem;
          margin-right: 0.25rem;
        }
        .title-item2-font-online {
          color: #03e88f;
        }
        .title-item2-font-offline {
          color: #fe411b;
        }
      }
    }
    .title-item-selfcheck {
      flex: 3;
    }
    .title-item3 {
      flex: 5;
    }
    .title-item4 {
      flex: 5;
    }
    .title-item5 {
      flex: 8;
    }
    .title-item6 {
      flex: 5;
    }
    .text-title {
      color: #00ecfc;
      margin-right: 0rem;
    }
    .text-content {
      color: #fff;
    }
  }
  .content-title {
    width: 28.125rem;
    height: 2.1875rem;
    line-height: 2.1875rem;
    background: url("../../../assets/images/statusMonitor/small-title.png")
      no-repeat center center;
    background-size: 100% 100%;
    margin: 0.625rem 1.25rem;
    padding-left: 1.875rem;
    font-size: 1rem;
    color: #fff;
    font-weight: bold;
  }
  .test-equipment-top {
    display: flex;
    flex-direction: column;
  }
  .top-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    .top-content-item1 {
      width: 32vw;
      .status-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .status-item {
          display: flex;
          align-items: center;
          margin-bottom: 0.9375rem;
          width: 50%;
          font-size: 0.875rem;
          .status-title {
            width: 10rem;
            text-align: right;
            color: #00ecfc; /* 设置标题颜色为蓝色 */
            margin-right: 0.625rem;
          }

          .status-value {
            color: white; /* 设置内容文字颜色为白色 */
            vertical-align: middle;
          }
        }
      }
    }
    .top-content-item2 {
      flex: 1;
      .status-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .status-item {
          display: flex;
          align-items: center;
          margin-bottom: 0.9375rem;
          width: 25%;
          font-size: 0.875rem;
          .status-title {
            width: 10rem;
            text-align: right;
            color: #00ecfc; /* 设置标题颜色为蓝色 */
            margin-right: 0.625rem;
          }

          .status-value {
            color: white; /* 设置内容文字颜色为白色 */
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
